ES2015 Module
2016-08-02
ES2015 Module是ES2015非常重要的新特性,它意味着JS真正意义在语言层面对模块化的支持,但是作为JS应用场景最广也是最早的浏览器端,并没有任何浏览器实现对模块化的支持,因为这需要时间,所以,现在想要用到这个特性需要借助Babel的支持,即使在未来有浏览器提供了原生的模块化加载,但是为了考虑兼容性,Babel还是会长期存在的
语法
注意:import命令具有提升效果,不管写在哪一行都会提到模块头部首先执行
import
import 模块名 from ‘路径’
1 | // 引入变量 默认名称 |
export
输出变量
1 | export var firstName = 'Michael'; |
或
1 | var firstName = 'Michael'; |
方法也是同样。
方法还可以直接以function的方式输出,叫做模块的整体加载
1 | // test.js |
引入时可以直接使用
1 | import { foo, foo1 as f } from './test'; |
输出时可以使用as
重命名变量名
1 | export { |
输入默认接口 export default
1 | // export-default.js |
注意: 输出的必须是一个接口(对象或者类或方法),而不能直接是一个变量,如数字,字符串之类的
支持情况
浏览器
截止2016.08.02,所有浏览器均还不支持原生模块化
Node.js
Node.js 6以上
ES2015模块加载的本质
ES6模块加载的机制,与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝,而ES6模块输出的是值的引用。
CommonJS模块输出的是被输出值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。
ES6模块的运行机制与CommonJS不一样,它遇到模块加载命令import时,不会去执行模块,而是只生成一个动态的只读引用。等到真的需要用到时,再到模块里面去取值,换句话说,ES6的输入有点像Unix系统的“符号连接”,原始值变了,import输入的值也会跟着变。因此,ES6模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。
模块的继承
1 | // circleplus.js |
注意
export *
命令会忽略模块的default方法循环引用
1 | // a.js |